<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            text-align: center;
        }
        .wrap {
            width: 500px;
            margin:100px auto 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
        }
        th,td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th {
            font: 14px '苹方';
        }
        tbody tr {
            background-color: #f0f0f0;
            cursor: pointer;
        }

    </style>
</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>课程</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody id="target">
        <tr>
            <td>
                1
            </td>
            <td>吕不韦</td>
            <td>语文</td>
            <td>100</td>

        </tr>
        <tr>
            <td>
                2
            </td>
            <td>吕布</td>
            <td>日语</td>
            <td>100</td>
        </tr>
        <tr>
            <td>
                3
            </td>
            <td>吕蒙</td>
            <td>营销学</td>
            <td>100</td>
        </tr>
        <tr>
            <td>
                4
            </td>
            <td>吕尚</td>
            <td>数学</td>
            <td>100</td>
        </tr>
        <tr>
            <td>
                5
            </td>
            <td>吕雉</td>
            <td>英语</td>
            <td>100</td>
        </tr>
        <tr>
            <td>
                6
            </td>
            <td>吕超</td>
            <td>体育</td>
            <td>100</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script src="tools.js"></script>
<script>
    var tbody = getEleById('target');
    var arr = tbody.children;
    for(var i=0;i<arr.length;i++){
        if(i%2!==0){
            arr[i].style.backgroundColor='#a3a3a3';
        }else{
            arr[i].style.backgroundColor='#ccc';
        }
        var color = '';
        arr[i].onmouseover = function () {
            color = this.style.backgroundColor;
            this.style.backgroundColor = '#fff';
        }
        arr[i].onmouseout = function () {

            this.style.backgroundColor = color;
        }
    }
</script>
</html>